import React from 'react';
import cn from 'classnames';
import './index.less';
import { Link } from 'react-router-dom';

import { BreadCrumb } from '@knownsec/react-component';

const BreadCrumbBox = function (props) {
  const { arr, children, className } = props;
  return (
    <div className={cn('breadcrumbBox', className)}>
      <div>
        <ul className="breadcrumb">
          {arr.map((item) => (
            <li className={item.active ? 'active' : ''} key={item.name}>
              {item.link ? <Link to={item.link}>{item.name}</Link> : item.name}
            </li>
          ))}
        </ul>

        {/* <BreadCrumb arr={arr} /> */}
      </div>
      <div className="right-total">{children}</div>
    </div>
  );
};

export default BreadCrumbBox;
